import React from 'react'

import {getTopicData} from "../../../utils/api/home"
import {Empty, message} from "antd"

import "./index.scss"

/**
 * 专题模块 组件
 */
export default class HomeTopic extends React.Component {
    state = {
        list: []
    }

    // TODO topic click button
    // 专题点击的点击回调
    topicClickHandler = (topic) => {
        message.warn(`切换专题: ${topic}（失败），专题功能正在完善中，敬请期待~~~`, 1.5)
    }

    render() {
        return (
            <div className="s-hometopic">
                <div className="s-hometopic-title">
                    <span className="title-msg">专题</span>
                    <span className="title-more">全部专题</span>
                </div>
                <div className="s-hometopic-box">
                    {
                        this.state.list.length > 0 ? (
                            this.state.list.map((item, index) => (
                                <div className="s-hometopic-box-item" key={item.id} onClick={() => this.topicClickHandler(item.collection)}>
                                    <div className="item-img">
                                        <img src={item.imgUrl} alt="" />
                                        <span className="topic-index">专题：第{item.collection}期</span>
                                        <span className="topic-title">{item.title}</span>
                                    </div>
                                    <div className="item-msg">
                                        <span>更新5篇</span>
                                        <span>前往</span>
                                    </div>
                                </div>
                            ))
                        ) : (
                            <div className="s-hometopic-empty">
                                <h2>请求失败</h2>
                                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
                            </div>
                        )
                    }
                </div>
            </div>
        )
    }

    async componentDidMount() {

        // 获取数据

        let resp = await getTopicData()
        // console.log(resp)
        this.setState({list:resp})
    }
}
